<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车-Vue 版</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <div id="app">
        <div class="web">
            <!--商品展示区域-->
            <section class="goodsBox" @click="Showdetail">
                <div class="item" v-for="(item,index) in goodsList" :key="item.id">
                    <div class="imgBox">
                        <img :src="item.photo" alt="" />
                    </div>
                    <h3>{{item.title}}</h3>
                    <div>原价:￥<span>{{item.prize}}</span></div>
                    <div>折后价:￥<span>{{item.prize * item.discount}}</span></div>
                    <button @click="addToCart(item)">详情</button>
                </div>
            </section>
            <hr />
            <!--购物车展示区域-->
            <table border="1" cellspacing="0" width="1200">
                <thead>
                    <tr>
                        <td width="80">全选<input type="checkbox" v-model="allChecked" @click="updateAllChecked" /></td>
                        <td width="150">商品</td>
                        <td width="300">全称</td>
                        <td>单价</td>
                        <td>会员价</td>
                        <td>数量</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in cartList" :key="item.id">
                        <td><input type="checkbox" v-model="item.isChecked" @click="updateOneChecked"></td>
                        <td> <img :src="item.photo" alt="" /></td>
                        <td>{{item.title}}</td>
                        <td>{{item.prize}}</td>
                        <td>{{item.prize * item.discount}}</td>

                        <td>
                            <button @click="sub(item)">-</button>{{item.count}}
                            <button @click="add(item)">+</button>
                        </td>
                        <td>
                            <button @click="Showdetail">修改</button>
                            <button @click="del(item)">删除</button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="8">
                            <main>
                                <section>
                                    <div @click="del(item)">删除所选商品</div>
                                    <section>
                                        <p>合计:<span>{{total.num}}<span>件商品 原价:￥<span>{{total.money}}</span></p>
                                        <p>优惠:￥<span>{{total.discount}}</span></p>
                                    </section>
                                </section>
                                <section>
                                    <div>重新定制</div>
                                    <div>总计（不含运费）:￥<span>{{total.money - total.discount}}</span></div>
                                </section>
                            </main>
                        </td>
                    </tr>
                </tfoot>
            </table>
            <!--商品详细信息弹窗-->
            <div class="mask" v-if="isMaskShow">
                <div class="goodsDetail" v-for="(item,index) in goodsList" :key="item.id">
                    <div class="goodsBox">
                        <img :src="item.photo" alt="" />
                    </div>
                    <div class="goodsChoice">
                        <h5>{{item.title}}</h5>
                        <span>价格: ￥{{item.prize}}</span>
                        <span>会员价:</span>
                        <span>￥{{item.prize * item.discount}}</span>
                        <hr/>
                        <div class="sex">
                            <span>性别：</span>
                            <select class="selectGender">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        <div class="sizeBox">
                            <span>尺码：</span>
                            <div class="buttonBox">
                                <input class="sizeBtn" id="s" type="button" value="S" />
                                <input class="sizeBtn" id="m" type="button" value="M" />
                                <input class="sizeBtn" id="l" type="button" value="L" />
                                <input class="sizeBtn" id="xl" type="button" value="XL" />
                                <input class="sizeBtn" id="xxl" type="button" value="XXL" />
                            </div>
                        </div>
                        <div class="buyQuantity">
                            <span>数量：</span>
                            <span class="numJian">-</span>
                            <input type="text" class="inputNum" value="1" readonly />
                            <span class="numJia">+</span>
                        </div>
                        <button class="addToCart">加入购物车</button>
                        <span class="closePopup" @click="closePopup">X</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
<script src="vue-2.4.0.js "></script>
<script>
    // 向后台发送请求获取商品列表的数据
    function getList() {
        return new Promise((resolve) => {
            fetch("http://student.0melon0.cn/index/index/get_goods_list ")
                .then(response =>
                    response.json())
                .then(data =>
                    resolve(data.data))
                .catch(error => console.log("error is ", error));
        })
    }
    new Vue({
        el: "#app ",
        data: {
            goodsList: [], //商品列表商品信息
            cartList: [], // 购物车列表购物车信息
            allChecked: true, // 购物车全选框初始化为选中状态
            isMaskShow: false, //弹窗初始化为关闭状态
        },
        async created() {
            this.goodsList = await getList();
            console.log(this.goodsList);
        },

        computed: {
            // 计算总数
            total() {
                let num = this.cartList.reduce((sum, ele) => {
                    if (ele.isChecked) {

                        sum += ele.count;
                    }
                    return sum;
                }, 0);

                let money = this.cartList.reduce((sum, ele) => {
                    if (ele.isChecked) {
                        sum += ele.count * ele.prize;
                    }
                    return sum;
                }, 0);
                let discount = this.cartList.reduce((sum, ele) => {
                    if (ele.isChecked) {
                        sum += ele.count * ele.prize - ele.count * ele.discount * ele.prize;
                    }
                    return sum;
                }, 0);

                return {
                    num,
                    money,
                    discount
                }
            },
        },
        methods: {
            // 全选功能：
            updateAllChecked() {
                this.cartList.forEach(ele => {
                    ele.isChecked = event.target.checked;
                });
            },

            // 子选项控制全选
            updateOneChecked() {
                this.allChecked = this.cartList.every((ele) => ele.isChecked)

            },

            //商品数量增加 
            add(item) {
                item.count++;
            },
            // 数量减少 边界判断  最少不能为1
            sub(item) {
                if (item.count > 1) {
                    item.count--;
                } else {
                    item.count == 1;
                }

            },
            del(item) {
                const index = this.cartList.findIndex((ele) => ele.id === item.id)
                console.log(index);
                if (index != -1) {
                    this.cartList.splice(index, 1);
                }
            },
            //打开商品详情弹窗：
            Showdetail(event) {
                this.isMaskShow = true;
                console.log(event.target);
                if (event.target.localName === "button") {
                    let goodsInfo = this.goodsList[event.target.id];

                }
                //console.log(goodsInfo);

            },
            // 关闭弹窗
            closePopup() {
                this.isMaskShow = false;
            },
            // 添加商品到购物车
            addToCart(item) {
                let goods = this.cartList.find(ele => ele.id === item.id)
                console.log(goods);



                if (goods) {
                    goods.count++;
                    // 如果有，找到该对象，之后，count+1
                } else {
                    // 如果没有，push
                    this.cartList.push({
                        ...item,
                        isChecked: true,
                        count: 1,
                    })
                    console.log(this.cartList);
                }
            },

        },

    });
</script>

</html>